<template>
  <table-box class="table-height-auto" show-index :data="tableData" :table-config="tableConfig" />
</template>
<script>
export default {
  name: 'ChangeContacts',
  components: {
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: 'view'
    },
    isBefore: {
      type: Boolean,
      default: false
    },
    editableColumn: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableConfig: {
        hideFuncBar: true,
        setting: [
          {
            prop: 'isChange',
            label: '是否变更',
            minWidth: 140,
            render: this.renderWrap(
              'isChange',
              (h, row, value) => h('c-dict-range-view', {
                props: {
                  value: row.isChange,
                  dictTypeCode: 'BOOLEANS',
                  domainCode: 'marketing',
                  appCode: 'slm'
                }
              }),
              (h, row, value) => {
                return h('el-switch', {
                  props: {
                    value: row.isChange,
                    activeValue: 1,
                    inactiveValue: 0
                  },
                  on: {
                    input: v => {
                      this.$set(row, 'isChange', v)
                      this.$emit('change', this.$deepClone(row))
                    }
                  },
                  nativeOn: {
                    click: e => e.stopPropagation()
                  }
                })
              })
          },
          {
            prop: 'changeType',
            label: '变更类型',
            required: true,
            minWidth: 140,
            render: this.renderWrap(
              'changeType',
              (h, row, value) => h('c-dict-range-view', {
                props: {
                  value: value,
                  dictTypeCode: 'CTM_CHANGE_TYPE',
                  domainCode: 'marketing',
                  appCode: 'slm'
                }
              }),
              (h, row, value) => h('c-dict-select', {
                props: {
                  value: row.changeType,
                  dictTypeCode: 'CTM_CHANGE_TYPE',
                  disabled: row.changeType === 'B',
                  exclude: row.changeType === 'B' ? [] : ['B']
                },
                on: {
                  input: v => {
                    this.$set(row, 'changeType', v)
                  }
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            )
          },
          {
            prop: 'name',
            label: '联系人姓名',
            required: true,
            minWidth: 140,
            render: this.renderWrap(
              'name',
              (h, row, value) => h('span', value),
              (h, row, value) => h('el-input', {
                props: {
                  value: row.name,
                  placeholder: '请输入',
                  clearable: true
                },
                attrs: {
                  placeholder: '请输入',
                  clearable: true
                },
                on: {
                  input: v => {
                    this.$set(row, 'name', v)
                  }
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            )
          },
          {
            prop: 'contactTypeCode',
            label: '联系人类别',
            required: true,
            minWidth: 200,
            overflowHidden: false,
            render: this.renderWrap(
              'contactTypeName',
              (h, row, value) => h('span', value),
              (h, row, value) => h('c-common-search-mdm', {
                props: {
                  value: row.contactTypeCode,
                  label: row.contactTypeName,
                  placeholder: '请选择',
                  custDocCode: 'QY019'
                },
                on: {
                  input: v => this.$set(row, 'contactTypeCode', v),
                  'update:label': v => this.$set(row, 'contactTypeName', v)
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            )
          },
          {
            prop: 'contactTel',
            label: '联系人电话',
            minWidth: 140,
            render: this.renderWrap(
              'contactTel',
              (h, row, value) => h('span', value),
              (h, row, value) => h('el-input', {
                props: {
                  value: row.contactTel,
                  placeholder: '请输入',
                  clearable: true
                },
                attrs: {
                  placeholder: '请输入',
                  clearable: true
                },
                on: {
                  input: v => {
                    this.$set(row, 'contactTel', v)
                  }
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            )
          },
          {
            prop: 'contactPhone',
            label: '联系人手机',
            required: true,
            minWidth: 140,
            render: this.renderWrap(
              'contactPhone',
              (h, row, value) => h('span', value),
              (h, row, value) => h('el-input', {
                props: {
                  value: row.contactPhone,
                  placeholder: '请输入',
                  clearable: true
                },
                attrs: {
                  placeholder: '请输入',
                  clearable: true
                },
                on: {
                  input: v => {
                    this.$set(row, 'contactPhone', v)
                  }
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            )
          },
          {
            prop: 'contactFax',
            label: '联系人传真',
            minWidth: 140,
            render: this.renderWrap(
              'contactFax',
              (h, row, value) => h('span', value),
              (h, row, value) => h('el-input', {
                props: {
                  value: row.contactFax,
                  placeholder: '请输入',
                  clearable: true
                },
                attrs: {
                  placeholder: '请输入',
                  clearable: true
                },
                on: {
                  input: v => {
                    this.$set(row, 'contactFax', v)
                  }
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            )
          },
          {
            prop: 'email',
            label: '联系人邮箱',
            minWidth: 140,
            render: this.renderWrap(
              'email',
              (h, row, value) => h('span', value),
              (h, row, value) => h('el-input', {
                props: {
                  value: row.email,
                  placeholder: '请输入',
                  clearable: true
                },
                attrs: {
                  placeholder: '请输入',
                  clearable: true
                },
                on: {
                  input: v => {
                    this.$set(row, 'email', v)
                  }
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            )
          },
          {
            prop: 'address',
            label: '联系人地址',
            minWidth: 140,
            render: this.renderWrap(
              'address',
              (h, row, value) => h('span', value),
              (h, row, value) => h('el-input', {
                props: {
                  value: row.address,
                  placeholder: '请输入',
                  clearable: true
                },
                attrs: {
                  placeholder: '请输入',
                  clearable: true
                },
                on: {
                  input: v => {
                    this.$set(row, 'address', v)
                  }
                },
                nativeOn: {
                  click: e => e.stopPropagation()
                }
              })
            )
          },
          {
            prop: 'contactId',
            label: '联系人ID',
            minWidth: 120
          },
          {
            prop: 'operator',
            label: '操作',
            render: (h, row) => {
              return h('i', {
                class: 'el-icon-delete',
                style: {
                  fontSize: '16px',
                  cursor: 'pointer',
                  color: 'red',
                  fill: 'red'
                },
                on: {
                  click: e => {
                    e.stopPropagation()
                    this.$emit('remove', row)
                  }
                }
              })
            }
          }
        ]
      }
    }
  },
  watch: {
  },
  created() {
    if (this.isBefore) {
      this.removeProp(this.tableConfig, 'changeType operator')
    } else {
      this.removeProp(this.tableConfig, 'isChange')
    }
    if (this.type === 'view') {
      this.removeProp(this.tableConfig, 'operator')
    }
  },
  methods: {
    removeProp(tableConfig, props) {
      props.split(' ').forEach(prop => {
        const i = tableConfig.setting.findIndex(e => e.prop === prop)
        if (i >= 0) {
          tableConfig.setting.splice(i, 1)
        }
      })
    },
    renderWrap(prop, render1, render2) {
      return (h, row) => {
        const value = this.getValue(row, prop)
        return !this.isEdit(prop, row) ? render1(h, row, value) : render2(h, row, value)
      }
    },
    isEdit(prop, row) {
      if (this.editableColumn.includes(prop)) {
        return true
      }
      if (this.type === 'view') {
        return false
      }
      if (this.type === 'edit') {
        if (row.changeType === 'C') {
          return false
        }
        return true
      }
      return false
    },
    getValue(row, prop) {
      if (this.type === 'view') {
        return row[prop]
      }
      if (row.changeType === 'C') {
        return row.raw[prop]
      } else {
        return row[prop]
      }
    },
    hasChange() {
      for (let i = 0; i < this.tableData.length; i++) {
        const v = this.tableData[i]
        if (v.changeType !== 'A') {
          continue
        }
        // 变更类型为变更
        const excloudes = 'operator changeType'.split(' ')
        const keys = this.tableConfig.setting.map(e => e.prop).filter(e => !excloudes.includes(e) && e !== '')
        if (keys.every(k => {
          return v[k] === v.raw[k]
        })) {
          this.$message.warning(`【${this.title}】第${i + 1}行【变更类型】为【变更】，但信息未修改!`)
          return false
        }
      }
      return true
    },
    validate() {
      if (!this.hasChange()) {
        return Promise.reject(this.tableData)
      }
      if (this.tableData.length === 0) {
        this.$message.warning(`【${this.title}】没有信息变更!`)
        return Promise.reject(this.tableData)
      }
      const regPhone = /^1\d{10}|([0-9]{3,4}-)?[0-9]{7,8}$/
      const regTel = /^[0-9]{3,4}-?[0-9]{7,8}$/
      const requiredKeys = {
        changeType: '变更类型',
        name: '联系人姓名',
        contactTypeCode: '联系人类别',
        contactPhone: '联系人手机'
      }
      for (let i = 0; i < this.tableData.length; i++) {
        const item = this.tableData[i]
        if (item.changeType === 'C') continue
        // 电话
        if (item.contactTel && !regTel.test(item.contactTel)) {
          this.$message.warning(`请检查【${this.title}】第${i + 1}行【联系人电话】格式!`)
          return Promise.reject(this.tableData)
        }
        if (item.contactPhone && !regPhone.test(item.contactPhone)) {
          this.$message.warning(`请检查【${this.title}】第${i + 1}行【联系人手机】格式!`)
          return Promise.reject(this.tableData)
        }
        // 必填
        for (const [k, msg] of Object.entries(requiredKeys)) {
          const v = item[k]
          if (v === undefined || v === null || v === '') {
            this.$message.warning(`【${this.title}】第${i + 1}行【${msg}】必填(选)!`)
            return Promise.reject(this.tableData)
          }
        }
      }
      return Promise.resolve(this.tableData)
    }
  }
}
</script>
